<template>
	<div class="login-bg flex-center-center">
		<div class="login-body">
			<div class="login-title">
				<div class="login-title-img"></div>
			</div>
			<div class="login-form">
				<div class="login-form-body">
					<van-cell-group class="form-group"
													inset>
						<van-field v-model="accountNum"
											clearable
											label="账号"
											placeholder="请输入账号" />
					</van-cell-group>
					<van-cell-group class="form-group"
													inset>
						<van-field v-model="password"
											clearable
											label="密码"
                      type="password"
											placeholder="请输入密码" />
					</van-cell-group>
					<van-cell-group class="form-group form-switch"
													inset>
						<van-switch v-model="checked"
												size="24px"
												active-color="#39b54a"
												inactive-color="#8799a3">
							<template #node>
								<div class="icon-wrapper">
									<van-icon :name="checked ? 'success' : 'cross'" />
								</div>
							</template>
						</van-switch>
						<label>记住密码</label>
					</van-cell-group>
					<van-cell-group class="form-group form-buttom"
													inset>
						<van-button round
												type="success" @click="Login">登录</van-button>
					</van-cell-group>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: "UserLogin",
	data () {
		return {
			accountNum: "",
      password:"",
			checked: true
		}
	},
	methods: {
    Login(){
      this.$router.push({ path: '/' });
    }
	}
}
</script>
<style scoped>
.login-bg {
	width: 100%;
	height: inherit;
}
.login-title {
	display: flex;
	justify-content: center;
}
.login-title-img {
	width: 386px;
	height: 54px;
	background: url("../../assets/logo-2.png");
}
.login-form {
	background: linear-gradient(0deg, #3d50cc, #329ddb 53.47%, #26fff1);
	/* border: 1px solid #707070; */
	box-shadow: 0 5px 30px 10px rgba(19, 18, 23, 0.3);
	width: 463px;
	height: 320.54px;
	opacity: 0.9;
	border-radius: 25px;
	margin-top: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-form-body{
  width: 450px;
}
.form-group {
	margin: 20px 50px;
}
.form-switch {
	background: transparent;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.form-switch label {
	color: #ffffff;
	margin-left: 10px;
}
.form-buttom {
	background: transparent;
}
.form-buttom button {
	width: 175px;
	height: 40px;
	background: linear-gradient(180deg, #dfe9f3, #fff);
	border: 1px solid #d9d9d9;
	border-radius: 20px;
	color: #333;
}
</style>